<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <link rel="apple-touch-icon" sizes="76x76" href="../assets/img/apple-icon.png">
    <link rel="icon" type="image/png" href="../assets/img/favicon.ico">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>古籍管理</title>
    <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport' />
    <!--     Fonts and icons     -->
    <!--    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700,200" rel="stylesheet" />-->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" />
    <!-- CSS Files -->
    <link href="../assets/css/bootstrap.min.css" rel="stylesheet" />
    <link href="../assets/css/light-bootstrap-dashboard.css?v=2.0.0 " rel="stylesheet" />
    <!-- CSS Just for demo purpose, don't include it in your project -->
    <link href="../assets/css/demo.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css">

<!--    <link href="https://cdn.bootcss.com/bootstrap-select/1.12.1/css/bootstrap-select.min.css" rel="stylesheet">-->
<!--    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>-->
<!--    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>-->
<!--    <script src="https://cdn.bootcss.com/bootstrap-select/1.12.1/js/bootstrap-select.min.js"></script>-->
</head>

<body>
    <div class="wrapper">
        <div class="sidebar" data-image="../assets/img/sidebar-5.jpg">
            <div class="sidebar-wrapper">
                <div class="logo">
                    <a href="http://www.creative-tim.com" class="simple-text">
                        诗词大王后台管理
                    </a>
                </div>
                <ul class="nav">
                    <li>
                        <a class="nav-link" href="./user.html">
                            <i class="nc-icon nc-circle-09"></i>
                            <p>编辑个人资料</p>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="./table.html">
                            <i class="nc-icon nc-notes"></i>
                            <p>名句信息管理</p>
                        </a>
                    </li>
                    <li>
                        <a class="nav-link" href="./poetryManager.html">
                            <i class="nc-icon nc-pin-3"></i>
                            <p>诗词信息管理</p>
                        </a>
                    </li>
                    <li>
                        <a class="nav-link" href="./DynastyManager.html">
                            <i class="nc-icon nc-bell-55"></i>
                            <p>朝代管理</p>
                        </a>
                    </li>
                    <li>
                        <a class="nav-link" href="./KnowManager.html">
                            <i class="nc-icon nc-bell-55"></i>
                            <p>知识管理</p>
                        </a>
                    </li>
                    <li>
                        <a class="nav-link" href="./PoetsManag.html">
                            <i class="nc-icon nc-bell-55"></i>
                            <p>诗人管理</p>
                        </a>
                    </li>
                    <li class="nav-item active">
                        <a class="nav-link" href="./AncientManager.html">
                            <i class="nc-icon nc-bell-55"></i>
                            <p>古籍管理</p>
                        </a>
                    </li>
                    <li>
                        <a class="nav-link" href="./IdiomManager.html">
                            <i class="nc-icon nc-bell-55"></i>
                            <p>成语管理</p>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="main-panel">
            <!-- Navbar -->
            <nav class="navbar navbar-expand-lg " color-on-scroll="500" id="personInfo">
                <div class="container-fluid">
                    <a class="navbar-brand" href="#pablo"> 古籍管理 </a>
                    <button href="" class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-bar burger-lines"></span>
                        <span class="navbar-toggler-bar burger-lines"></span>
                        <span class="navbar-toggler-bar burger-lines"></span>
                    </button>
                    <div class="collapse navbar-collapse justify-content-end" id="navigation">
                        <ul class="nav navbar-nav mr-auto">
                            <li class="nav-item">
                                <a href="#" class="nav-link" data-toggle="dropdown">
                                    <i class="nc-icon nc-palette"></i>
                                    <span class="d-lg-none">Dashboard</span>
                                </a>
                            </li>

                            <li class="nav-item">
                                <a href="#" class="nav-link">
                                    <i class="nc-icon nc-zoom-split"></i>
                                    <span class="d-lg-block">&nbsp;Search</span>
                                </a>
                            </li>
                        </ul>
                        <ul class="navbar-nav ml-auto">

                            <li class="nav-item">
                                <a class="nav-link" href="#pablo">
                                    <span class="no-icon" @click="signOut">退出登录</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
            <!-- End Navbar -->
            <div class="content">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="card strpied-tabled-with-hover">
                                <div class="card-header ">
                                    <h4 class="card-title">添加古籍</h4>
                                    <p class="card-category">添加有趣的古籍知识</p>
                                </div>

                                <!-- form 表单，添加管理-->
                                <div style="padding: 10px;" id="addDj">
                                    <form class="bs-example bs-example-form" method="post"  @submit.prevent="addDjInfo" >
                                        <div class="input-group" style="margin-bottom: 5px">
                                            <span class="input-group-addon">古籍所属书籍名
                                                <i class="bi bi-send-fill"></i>
                                            </span>
                                            <input type="text" class="form-control" placeholder="请输入古籍的书籍名" required="required" name="title" v-model="addDj.title">
                                        </div>
                                        <div class="input-group" style="margin-bottom: 5px">
                                            <span class="input-group-addon">书籍介绍
                                                <i class="bi bi-send-fill"></i>
                                            </span>
                                            <textarea type="text" class="form-control" placeholder="请输入书籍的介绍" required="required" name="info" v-model="addDj.info"></textarea>
                                        </div>
                                        <div class="input-group" style="margin-bottom: 5px">
                                            <span class="input-group-addon">作者
                                                <i class="bi bi-send-fill"></i>
                                            </span>
                                            <input type="text" class="form-control" placeholder="请输入书籍的作者" required="required" name="zuozhe" v-model="addDj.zuozhe">
                                        </div>
                                        <div class="input-group" style="margin-bottom: 5px">
                                            <span class="input-group-addon">古籍的类型
                                                <i class="bi bi-send-fill"></i>
                                            </span>
                                            <select class="form-control selectpicker" data-live-search="true" multiple name="type" v-model="addDj.type">
                                                <optgroup label="集部">
                                                    <option value="集部">集部</option>
                                                    <option value="楚辞类">楚辞类</option>
                                                    <option value="别集类">别集类</option>
                                                    <option value="总集类">总集类</option>
                                                    <option value="诗文评类">诗文评类</option>
                                                    <option value="词曲类">词曲类</option>
                                                </optgroup>
                                                <optgroup label="子部">
                                                    <option value="子部">子部</option>
                                                    <option value="儒家类">儒家类</option>
                                                    <option value="兵家类">兵家类</option>
                                                    <option value="法家类">法家类</option>
                                                    <option value="农家类">农家类</option>
                                                    <option value="医家类">医家类</option>
                                                    <option value="天文算法类">天文算法类</option>
                                                    <option value="术数类">术数类</option>
                                                    <option value="艺术类">艺术类</option>
                                                    <option value="谱录类">谱录类</option>
                                                    <option value="杂家类">杂家类</option>
                                                    <option value="类书类">类书类</option>
                                                    <option value="小说家类">小说家类</option>
                                                    <option value="释家类">释家类</option>
                                                    <option value="道家类">道家类</option>
                                                </optgroup>
                                                <optgroup label="经部">
                                                    <option value="经部">经部</option>
                                                    <option value="易类">易类</option>
                                                    <option value="书类">书类</option>
                                                    <option value="诗类">诗类</option>
                                                    <option value="礼类">礼类</option>
                                                    <option value="春秋类">春秋类</option>
                                                    <option value="孝经类">孝经类</option>
                                                    <option value="五经总义类">五经总义类</option>
                                                    <option value="四书类">四书类</option>
                                                    <option value="乐类">乐类</option>
                                                    <option value="小学类">小学类</option>
                                                </optgroup>
                                                <optgroup label="史部">
                                                    <option value="史部">史部</option>
                                                    <option value="正史类">正史类</option>
                                                    <option value="编年类">编年类</option>
                                                    <option value="纪事本末类">纪事本末类</option>
                                                    <option value="杂史类">杂史类</option>
                                                    <option value="别史类">别史类</option>
                                                    <option value="诏令奏议类">诏令奏议类</option>
                                                    <option value="传记类">传记类</option>
                                                    <option value="史钞类">史钞类</option>
                                                    <option value="载记类">载记类</option>
                                                    <option value="载记类">载记类</option>
                                                    <option value="载记类">载记类</option>
                                                    <option value="载记类">载记类</option>
                                                    <option value="载记类">载记类</option>
                                                    <option value="时令类">时令类</option>
                                                    <option value="地理类">地理类</option>
                                                    <option value="职官类">职官类</option>
                                                    <option value="政书类">政书类</option>
                                                    <option value="目录类">目录类</option>
                                                    <option value="史评类">史评类</option>
                                                </optgroup>
                                            </select>
                                        </div>
                                        <div class="input-group" style="margin-bottom: 5px">
                                            <span class="input-group-addon">古籍的章节标题
                                                <i class="bi bi-send-fill"></i>
                                            </span>
                                            <input type="text" class="form-control" placeholder="请输入书籍的作者" required="required" name="djTitle" v-model="addDj.djTitle">
                                        </div>
                                        <div class="input-group" style="margin-bottom: 5px">
                                            <span class="input-group-addon">章节内容
                                                <i class="bi bi-send-fill"></i>
                                            </span>
                                            <input type="text" class="form-control" placeholder="请输入该章节的详细内容" name="body" v-model="addDj.body">
                                        </div>
                                        <div class="text-center">
                                            <button type="submit" class="btn-default" style="width: 200px;color: orange">添加</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-12" id="findDj">
                            <div class="card card-plain table-plain-bg">
                                <div class="card-header ">
                                    <h4 class="card-title">编辑古籍</h4>
                                    <p class="card-category">对古籍进行编辑操作</p>
                                </div>

                                <!-- 输入框 -->
                                <div class="container" >
                                    <div class="input-group">
                                        <input id="search" type="text" class="form-control input-lg" placeholder="请输入详细的古籍章节"><span class="input-group-addon btn btn-primary" @click="searchDj()"><i class="nc-icon nc-zoom-split"></i></span>
                                    </div>
                                </div>

                                <div class="card-body table-full-width table-responsive">
                                    <table class="table table-hover">
                                        <thead>
                                            <th>章节名</th>
                                            <th>内容</th>
                                            <th>操作</th>
                                            <th>操作</th>
                                        </thead>
                                        <tbody>
                                            <tr v-for="dj in Djs">
                                                <td v-text="dj.title">卜算子·我住长江头</td>
                                                <td class="txt" v-html="dj.body">只愿君心似我心，定不负相思意</td>
                                                <td><button @click="update(dj.id)" class="btn-success" style="color:#fff;" data-toggle="modal" data-target="#myModal">修改</button></td>
                                                <td><button @click="del(dj.id)" class="btn-danger" style="color: white">删除</button></td>
                                            </tr>
                                        </tbody>
                                    </table>
                                    <nav class="mt-3" style="text-align: center">
                                        <ul class="pagination pagination-sm  justify-content-center">
                                            <li class="page-item">
                                                <a class="page-link" aria-label="Previous" href="" @click.prevent="loadPage(pageinfo.prePage)">
                                                    <span aria-hidden="true">&laquo;</span>
                                                    <span class="sr-only">上一页</span>
                                                </a>
                                            </li>
                                            <li class="page-item" v-for="n in pageinfo.navigatepageNums">
                                                <a class="page-link" href="" v-text="n" @click.prevent="loadPage(n)"
                                                   :class="{'bg-secondary text-light': n == pageinfo.pageNum}">1</a>
                                            </li>
                                            <!--<li class="page-item">
                                                <a class="page-link " href="#" v-for="n in pageinfo.navigatepageNums" @click.prevent="loadPoems(n)"
                                                   v-text="n" :class="{'bg-secondary text-light': n == pageinfo.pageNum}">1</a>
                                            </li>-->
                                            <li class="page-item "><a class="page-link" href="">
                                                <span aria-hidden="true">当前页<span  v-text="pageinfo.pageNum">5</span></span>
                                            </a></li>
                                            <li class="page-item">
                                                <a class="page-link" aria-label="Next" href="" @click.prevent="loadPage(pageinfo.nextPage)">
                                                    <span aria-hidden="true">&raquo;</span>
                                                    <span class="sr-only">下一页</span>
                                                </a>
                                            </li>

                                            <!-- <li class="page-item" >
                                                 <span aria-hidden="true">跳转到</span>
                                                 <input type="text" style="width: 50px" id="page"><button @click.prevent="JumpPoems()">跳转</button>
                                             </li>-->
                                        </ul>
                                    </nav>
                                </div>

                                <!------->

                                <!-- 模态框（Modal） -->
                                <div class="modal fade col-sm-12" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="margin: 0 auto">
                                    <div class="modal-dialog">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h4 class="modal-title" id="myModalLabel">
                                                    古籍修改
                                                </h4>
                                            </div>
                                            <form  method="post" id="form_data" @submit.prevent="ModifySuccess">
                                                <div class="form-group form-row" hidden="hidden">
                                                    <label class="col-form-label">I&nbsp;&nbsp;&nbsp;D：</label>
                                                    <input  type="text" id="id" class="form-control" name="id" v-model="updateDj.id" >
                                                </div>
                                                <div class="form-group form-row">
                                                    <label class="col-form-label">标&nbsp;&nbsp;&nbsp;题：</label>
                                                    <input type="text" class="form-control" id="title" name="pTitle" v-model="updateDj.title"/>
                                                </div>
                                                <div class="form-group form-row">
                                                    <label class="col-form-label">内&nbsp;&nbsp;&nbsp;容：</label>
                                                    <textarea type="text" class="form-control" id="pBody" name="body" v-model="updateDj.body"></textarea>
                                                </div>
                                                <div class="text-center">
                                                    <button type="submit" class="btn btn-default" style="color: orange;" data-dismiss="modal">取消</button>
                                                    <button type="submit" class="btn btn-primary" style="color: green;">提交更改</button>
                                                </div>
                                            </form>
                                        </div><!-- /.modal-content -->
                                    </div><!-- /.modal -->
                                </div>
                            </div>
                        </div>


                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<!--   Core JS Files   -->
<script src="../assets/js/core/jquery.3.2.1.min.js" type="text/javascript"></script>
<script src="../assets/js/core/popper.min.js" type="text/javascript"></script>
<script src="../assets/js/core/bootstrap.min.js" type="text/javascript"></script>
<script src="../assets/js/plugins/bootstrap-switch.js"></script>
<script src="../assets/js/plugins/chartist.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>
<!--  Notifications Plugin    -->
<script src="../assets/js/plugins/bootstrap-notify.js"></script>
<!-- Control Center for Light Bootstrap Dashboard: scripts for the example pages etc -->
<!--<script src="../assets/js/light-bootstrap-dashboard.js?v=2.0.0 " type="text/javascript"></script>-->
<!-- Light Bootstrap Dashboard DEMO methods, don't include it in your project! -->
<script src="../assets/js/demo.js"></script>
<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- 引入axios 实现页面的异步请求-->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
    let m_person = new Vue({
        el:"#personInfo",
        data:{},
        methods:{
            // 退出登录
            signOut:function () {
                if (window.confirm("是否确认退出登录？？")){
                    axios({
                        url:"/user/signOut",
                        data:"GET"
                    }).then(function (r) {
                        location.href = "/login.html";
                    })
                }else {
                    return false;
                }
            }
        }
    })

    let m_addDj = new Vue({
        el:"#addDj",
        data:{
            addDj:{
                title:'',
                info:'',
                zuozhe:'',
                type:([]).join(","),
                djTitle:'',
                body:''
            }
        },
        methods:{
            // 添加
            addDjInfo:function () {
                if (window.confirm("是否添加古籍？？")){
                    axios({
                        url:"/djList/addDj",
                        method:"POST",
                        data:this.addDj
                    }).then(function (r) {
                        if (r.data == 1){
                            alert("添加成功！！！")
                            location.href="http://localhost:8080/admin/examples/AncientManager.html";
                        }else {
                            alert("该古籍已存在！！")
                        }
                    })
                }else {
                    return false;
                }
            }
        }
    })

    // 模糊查询
    let m_findDj = new Vue({
        el:"#findDj",
        data:{
            Djs:[],
            pageinfo:{},
            updateDj:{
                id:'',
                title:'',
                body:''
            }
        },
        methods:{
            searchDj:function (pageNum) {
                // 获取输入框的内容
                let search = document.getElementById("search").value;
                axios({
                    url:"/djInfo/find/fuzzy/" + search,
                    method: "GET",
                    params:{
                        pageNum:pageNum
                    }
                }).then(function (r) {
                    m_findDj.Djs = r.data.list;
                    m_findDj.pageinfo = r.data;
                    if ($.isEmptyObject(r.data.list)){
                        alert("查询结果为空！！")
                    }
                }).then(function () {
                    /* 超过一个字数显示省略号 */
                    $(".txt").each(function () {
                        var str = $(this).html()
                        var st = str.replace(/<[^>]+>/g,"");
                        var substr = st.substring(0,30);
                        $(this).html(substr + (str.length>30 ? '...' : ''));
                    })
                })
            },
            // 分页显示
            loadPage:function (pageNum) {
                this.searchDj(pageNum)
            },
            //删除
            del:function (event) {
                if (window.confirm("是否确定删除该章节？？")){
                    axios({
                        url:"/djInfo/delete/" + event,
                        method:"GET"
                    }).then(function (r) {
                        alert("删除成功！！")
                        location.href="http://localhost:8080/admin/examples/AncientManager.html";
                    })
                }else {
                    return false;
                }
            },
            //显示在模态框上
            update:function (event) {
                console.log("获取的id：" + event)
                axios({
                    url:"/djInfo/findOne/" + event,
                    method:"GET"
                }).then(function (r) {
                    console.log(r.data)
                    m_findDj.updateDj.id = r.data.id;
                    m_findDj.updateDj.title = r.data.title;
                    m_findDj.updateDj.body = r.data.body;
                })
            },
            // 点击提交更改
            ModifySuccess:function () {
                if (window.confirm("是否确定更新内容？？")){
                    axios({
                        url:"/djInfo/update",
                        method:"POST",
                        data:this.updateDj
                    }).then(function () {
                        alert("更新成功！！");
                        location.href="http://localhost:8080/admin/examples/AncientManager.html";
                    })
                }else {
                    return false;
                }
            }
        }
    })
</script>
</html>

